<!--
 * @Date: 2022-12-24 00:52:19
 * @LastEditors: 旧轩00°°
 * @LastEditTime: 2022-12-30 11:25:27
 * @FilePath: /vue3-ts-vite-pinia-husky/src/views/login/login-theme-1/index.vue
-->
<template>
  <img :src="bg" class="wave" />
  <div class="login-container">
    <div class="img">
      <component :is="illustration" />
    </div>
    <div class="login-box">
      <div class="login-form">
        <avatar class="avatar" />

        <Motion>
          <h2 class="outline-none">
            <TypeIt :values="[title]" :cursor="false" :speed="150" />
          </h2>
        </Motion>

        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="loginRules"
          size="large"
        >
          <Motion :delay="100">
            <el-form-item prop="username">
              <el-input
                clearable
                v-model="ruleForm.username"
                placeholder="请输入用户名"
              >
                <template #prefix>
                  <yhIcon name="user" />
                </template>
              </el-input>
            </el-form-item>
          </Motion>

          <Motion :delay="150">
            <el-form-item prop="password">
              <el-input
                clearable
                show-password
                v-model="ruleForm.password"
                placeholder="请输入密码"
              >
                <template #prefix>
                  <yh-icon name="lock" />
                </template>
              </el-input>
            </el-form-item>
          </Motion>

          <Motion :delay="200">
            <el-form-item prop="verifyCode">
              <el-input
                clearable
                v-model="ruleForm.verifyCode"
                placeholder="请输入验证码"
              >
                <template v-slot:append>
                  <ReVerifyCode v-model:code="ruleForm.imgCode" />
                </template>
              </el-input>
            </el-form-item>
          </Motion>

          <Motion :delay="300">
            <el-form-item>
              <el-button
                :loading="loading"
                class="login-submit"
                type="primary"
                size="default"
                @click="onLogin(ruleFormRef)"
              >
                登录
              </el-button>
            </el-form-item>
          </Motion>

          <Motion :delay="350">
            <el-form-item>
              <ThirdParty />
            </el-form-item>
          </Motion>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { bg, avatar, illustration } from './static/index'
import TypeIt from '@/components/ReTypeit'
import Motion from '../utils/motion'
import ReVerifyCode from '@/components/ReVerifyCode/index.vue'
import ThirdParty from '../components/ThirdParty/index.vue'
import { ElMessage, type FormInstance } from 'element-plus'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()

const title = ref('管理系统登录')

// 表单定义
const ruleFormRef = ref<FormInstance>()
const loading = ref(false)

interface RuleForm {
  username: string
  password: string
  verifyCode?: string
  imgCode?: string
}

const ruleForm = ref<RuleForm>({
  username: 'coderwhy', // 用户名  测试账号：coderdemo
  password: '123456',
  verifyCode: '',
  imgCode: ''
})
const loginRules = ref({
  username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
})

const router = useRouter()
const onLogin = async (formEl: FormInstance | undefined) => {
  loading.value = true
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    loading.value = false
    if (valid) {
      userStore
        .requestApiLogin({
          name: ruleForm.value.username,
          password: ruleForm.value.password
        })
        .then(() => router.push('/main'))
    } else {
      ElMessage.error('error')
      return fields
    }
  })
}
</script>

<!-- 重置样式 -->
<style lang="scss" scoped>
:deep(.el-input-group__append, .el-input-group__prepend) {
  padding: 0;
}
</style>

<style lang="scss" scoped>
.wave {
  position: fixed;
  height: 100%;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.login-container {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 18rem;
  padding: 0 2rem;
  .img {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    img {
      width: 500px;
    }
  }

  .login-box {
    display: flex;
    align-items: center;
    text-align: center;
    .login-form {
      width: 360px;
      h2 {
        text-transform: uppercase;
        margin: 15px 0;
        color: #999;
        font: bold 200% Consolas, Monaco, monospace;
      }
      .login-submit {
        width: 100%;
      }
    }

    .avatar {
      width: 350px;
      height: 80px;
    }
  }
}
</style>
